import Vue from 'vue'
// 定义指令
Vue.directive('imgerror', {
  // 元素放在页面上类似于组件mouted
  inserted(el, binding) {
    // 第一个参数el 是指令对象 会在当前的dom元素插入到节点之后执行
    // 第二个参数binding  是指令中的变量的解释,其中有一个属性叫做value
    // 最开始也判断是否为空
    if (!el.src) {
      el.src = binding.value
    }
    // 当图片有地址 但是地址没有加载成功的时候 会报错,会触发图片的一个事件=>onerror
    el.onerror = function() {
      // 当图片出现异常的时候 会将指令配置的默认图片设置为该图片的呢绒
      this.src = binding.value
    }
  },
  // 当模板发送生改变,触发这个方法
  // 通过钩子函数判空,给图片加上默认tp
  update(el, binding) {
    if (!el.src) {
      el.src = binding.value
    }
  }
})
